<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			ul {
				display: none;
			}
			
			li {
				transition: none;
			}
			
			li a {
				float: right;
			}
		</style>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、创建元素 <code>createElement & appendChild</code><br><br>
			<div class="box box-re">
				例1：创建li<br><br>
				<ul class="list-group">
				</ul>
				<button class="btn btn-info">创建li</button>
			</div>
			<div class="box box-re">
				例2：创建自定义内容的li<br><br>
				<ul class="list-group">
				</ul>
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">创建li</button>
			</div>
			<div class="box box-re">
				例3：创建自定义内容的li<br><br>
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">创建li</button>
				<ul class="list-group">
				</ul>
			</div>
		</div>
		<div id="div2" class="box box-re form-inline">
			2、插入元素 <code>createElement & insertBefore</code><br><br>
			<div class="box box-re">
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">插入li</button>
				<ul class="list-group">
				</ul>
			</div>
		</div>
		<div id="div3" class="box box-re form-inline">
			3、删除元素 <code>removeChild</code><br><br>
			<div class="box box-re">
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">插入li</button>
				<ul class="list-group">
				</ul>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>创建元素：</b><code>var 子节点=document.createElement('li')</code> 创建子节点变量 等于需要创建什么元素 那么参数就是什么。在创建完成之后系统并不知道把创建出的元素放到哪个父级下，所以需要指派：<code>父级.appendChild(子节点)</code> 这一步是把li作为子节点添加给父级的<strong>末尾</strong>。appendChild就是给元素添加父级的。</p>
			<p><b>插入元素：</b><code>父级.insertBefore(子节点,插入在谁之前（原有节点）)</code> 需要先判断ul中是否包含第0个li，如果包含才使用insertBefore，如果不包括则需要使用appendChild。 例如可以在li的第0个之前插入，那么刚插入的永远都是第0个，也就是在父级的<strong>开始</strong>插入的。</p>
			<p><b>删除元素：</b><code>oUla3[0].removeChild(this.parentNode)</code> 在父级下删除this的父级 也就是删除首父级的子级。</p>
		</div>

	</BODY>

</HTML>